<template>
	<view class="page">
		<view class="header">
			<text class="title">排队进度</text>
		</view>
		
		<view class="content">
			<!-- 排队状态卡片 -->
			<view class="status-card">
				<view class="queue-number">
					<text class="label">您的号码</text>
					<text class="number">A25</text>
				</view>
				<view class="queue-status">
					<text class="status-text">等待中</text>
					<text class="wait-time">预计等待时间：20分钟</text>
				</view>
			</view>
			
			<!-- 进度条 -->
			<view class="progress-section">
				<text class="section-title">当前进度</text>
				<view class="progress-bar">
					<view class="progress-inner" :style="{width: progress + '%'}"></view>
				</view>
				<view class="progress-info">
					<text>前面还有 3 桌</text>
					<text>已等待 15 分钟</text>
				</view>
			</view>
			
			<!-- 提醒设置 -->
			<view class="notice-section">
				<text class="section-title">提醒设置</text>
				<view class="notice-item">
					<text>叫号提醒</text>
					<switch :checked="noticeEnabled" @change="toggleNotice" />
				</view>
				<text class="notice-tip">我们将在前3桌时通知您</text>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="btn-cancel" @click="cancelQueue">取消排队</button>
				<button class="btn-refresh" @click="refreshProgress">刷新进度</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {onLoad, onShow, onUnload} from "@dcloudio/uni-app";
	
	// 数据定义
	const progress = ref(60)
	const noticeEnabled = ref(true)
	
	// 定时器
	let timer = null
	
	// 方法定义
	const toggleNotice = (e) => {
		noticeEnabled.value = e.detail.value
	}
	
	const cancelQueue = () => {
		uni.showModal({
			title: '取消排队',
			content: '确定要取消当前排队吗？',
			success: (res) => {
				if(res.confirm) {
					// TODO: 调用取消排队接口
					uni.showToast({
						title: '已取消排队',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			}
		})
	}
	
	const refreshProgress = () => {
		uni.showLoading({
			title: '刷新中...'
		})
		
		// 模拟刷新
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '已更新',
				icon: 'success'
			})
		}, 1000)
	}
	
	// 生命周期
	onLoad(() => {
		// 启动定时刷新
		timer = setInterval(() => {
			// TODO: 调用获取进度接口
			progress.value = Math.min(progress.value + 1, 100)
		}, 30000) // 每30秒更新一次
	})
	
	onUnload(() => {
		// 清除定时器
		if(timer) {
			clearInterval(timer)
		}
	})
</script>

<style>
	.page {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.header {
		padding: 20px;
		background-color: #fff;
	}
	
	.title {
		font-size: 18px;
		font-weight: bold;
	}
	
	.content {
		padding: 15px;
	}
	
	.status-card {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.queue-number .label {
		font-size: 14px;
		color: #666;
	}
	
	.queue-number .number {
		font-size: 24px;
		font-weight: bold;
		color: #e4393c;
		margin-top: 5px;
		display: block;
	}
	
	.queue-status {
		text-align: right;
	}
	
	.status-text {
		font-size: 16px;
		color: #e4393c;
	}
	
	.wait-time {
		font-size: 14px;
		color: #666;
		margin-top: 5px;
		display: block;
	}
	
	.progress-section {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
	}
	
	.section-title {
		font-size: 16px;
		margin-bottom: 10px;
		display: block;
	}
	
	.progress-bar {
		height: 6px;
		background-color: #f0f0f0;
		border-radius: 3px;
		overflow: hidden;
	}
	
	.progress-inner {
		height: 100%;
		background-color: #e4393c;
		transition: width 0.3s ease;
	}
	
	.progress-info {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		font-size: 14px;
		color: #666;
	}
	
	.notice-section {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
	}
	
	.notice-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.notice-tip {
		font-size: 12px;
		color: #999;
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}
	
	.btn-cancel, .btn-refresh {
		width: 45%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 20px;
		font-size: 14px;
	}
	
	.btn-cancel {
		background-color: #fff;
		color: #666;
		border: 1px solid #ddd;
	}
	
	.btn-refresh {
		background-color: #e4393c;
		color: #fff;
	}
</style> 